<template>
    <div>
        <div class="person-box" v-show="showPlay">
            <div style="background-color: #fff;position: fixed;top: 0;width: 100%;">
                <div style="padding:10px 0px;margin-left:-32px;position: relative;">
                    <img @click="returnBcak" style="width: 10px;top:10px;left:49px;position: absolute;"
                        src="../assets/img/common-icon-ArrowLeftBlack.svg" alt="">
                    <span style="margin-left:50%;color: #333;font-size: 16px;font-weight: bold;">游戏</span>
                </div>
            </div>
            <img src="../assets/img/youxibanner.png" class="banner-img">
            <ul class="game-menu">
                <li v-for="val in listData">
                    <div>
                        <img style="width:60px;border-radius: 10px;" :src="val.icon" alt="">
                    </div>
                    <div class="game-menu-text">
                        <p>
                            <span class='game-menu-title'>{{val.name}}</span>

                            <span class="tipClass" style="background-image: linear-gradient(to right,#E88CEF,#B136D1);"
                                v-if="val.tip.indexOf('精品') > -1">精品</span>
                            <span class="tipClass" style="background-image: linear-gradient(to right,#F54D78,#FF2D68);"
                                v-if="val.tip.indexOf('热门') > -1">热门</span>
                            <span class="tipClass" style="background-image: linear-gradient(to right,#54D5FF,#2DB3FF);"
                                v-if="val.tip.indexOf('最新') > -1">首发</span>
                            <span class="tipClass" style="background-image: linear-gradient(to right,#F59C50,#F4560D);"
                                v-if="val.tip.indexOf('礼包') > -1">礼包</span>
                        </p>
                        <p>
                            <span>{{val.type}}</span> |
                            <span style="color:#B136D1;">
                                {{tranNumber(val.vpv,2)}}
                            </span>
                            <span>人在玩</span>
                        </p>
                        <p>{{val.sub}}</p>
                    </div>
                    <div style="height: 60px;line-height: 64px;">
                        <span class="game-menu-btn" @click="playCli(val.iframeurl)">开玩</span>
                    </div>
                </li>
            </ul>
            <home-index></home-index>
        </div>
        <div v-show="!showPlay">
            <div style="background-color: #fff;position: fixed;top: 0;width: 100%;">
                <div style="padding:10px 0px;margin-left:-32px;position: relative;">
                    <img @click="returnBcakPlay" style="width: 10px;top:10px;left:49px;position: absolute;"
                        src="../assets/img/common-icon-ArrowLeftBlack.svg" alt="">
                    <span style="margin-left:50%;color: #333;font-size: 16px;font-weight: bold;">游戏</span>
                </div>
            </div>
            <iframe style="width: 100%;height: calc(100vh - 40px);margin-top: 40px;" :src="playUrl" frameborder="0"></iframe>
            <div v-if="completeState == 0">
                <div style="position: absolute;right: 16px;top:6px;width: 50px;height: 50px;border-radius: 26px;background-color: rgba(0,0,0,.4);padding:1px 1px;">
                </div>
                <van-circle style="position: absolute;right: 15px;top:5px;" v-model="currentRate" :rate="0" :speed="100" :stroke-width="70" layer-color="#fff" :color="gradientColor" :size="52" />
            </div>
        </div>
    </div>
</template>
<script>
    import homeIndex from "./homeIndex"
    import { Toast,Circle } from 'vant'
    export default {
        name: "gamePage",
        components: {
            homeIndex,
            [Circle.name]: Circle
        },
        data() {
            return {
                listData: [],
                adView: null,
                userId: "",
                showPlay: true,
                playUrl: '',
                setTimeIn: null,
                gradientColor: {
                    '0%': '#FF5AA0',
                    '100%': '#FF2E67',
                },
                currentRate:0,
                interNum:'',
                completeState: -1
            }
        },
        mounted() {
            // this.createAdView();
            this.userId = localStorage.getItem('user_id');
            if (!this.userId) {
                this.$router.push('/login')
                return
            }
            this.$store.dispatch('updataActive', 3);
            this.initData();
            this.getLoginUserAllTasks();
        },
        destroyed() {
            if (this.setTimeIn) { //如果定时器在运行则关闭
                clearTimeout(this.setTimeIn);
            }
        },
        methods: {
            initData() {
                var time = new Date().getTime();
                this.$http.post(this.utils.config + "/netmall/app/gamecenter/api/getShandwGameList?user_id=" + this.userId, { user_id: this.userId }).then((data) => {
                    if (data.data.success) {
                        this.listData = data.data.result;
                    }
                })
            },
            //获取用户的所有任务             
            getLoginUserAllTasks() {
                this.$http.post(this.utils.config + "/netmall/app/gamecenter/api/getLoginUserAllTasks?user_id=" + this.userId, { user_id: this.userId }).then((data) => {
                    if (data.data.success) {
                        var taskList = data.data.result.taskList;
                        for(let i=0;i<taskList.length;i++){
                            if(taskList[i].taskName == '看资讯'){
                                this.completeState = taskList[i].completeState;
                            }
                        }
                    }
                })
            },
            //点击开玩
            playCli(url) {
                this.showPlay = false;
                this.interNum = setInterval(()=>{
                    this.currentRate=this.currentRate+1;
                    if(this.currentRate >= 100){
                        clearInterval(this.interNum);
                        Toast('每日任务完成');
                    }
                },1800);
                this.playUrl = url;
                clearInterval(this.setTimeIn);
                this.setTimeIn = setTimeout(() => {
                    this.$http.get(this.utils.config + "/netmall/app/person/api/everyDayTask?user_id=" + this.userId + "&taskName=玩游戏&minute=3").then((data) => {
                        console.log('完成任务')
                    })
                }, 180000)
            },
            //创建广告控件
            createAdView() {
                adView = plus.ad.createAdView({
                    top: adDom.offsetTop + 'px',
                    left: '0px',
                    width: '100%',
                    height: '0px',
                    position: 'static'
                });
            },
            returnBcakPlay() {
                this.showPlay = true;
                clearInterval(this.interNum);
            },
            returnBcak() {
                this.$router.go(-1);
                clearInterval(this.interNum);
                this.currentRate = 0;
            },
            tranNumber(num, point) {
                // 将数字转换为字符串,然后通过split方法用.分隔,取到第0个
                let numStr = num.toString().split('.')[0]
                if (numStr.length < 6) { // 判断数字有多长,如果小于6,,表示10万以内的数字,让其直接显示
                    console.log(numStr);
                    return numStr;
                } else if (numStr.length >= 6 && numStr.length <= 8) { // 如果数字大于6位,小于8位,让其数字后面加单位万
                    let decimal = numStr.substring(numStr.length - 4, numStr.length - 4 + point)
                    console.log(decimal);
                    // 由千位,百位组成的一个数字
                    return parseFloat(parseInt(num / 10000) + '.' + decimal) + '万'
                } else if (numStr.length > 8) { // 如果数字大于8位,让其数字后面加单位亿
                    let decimal = numStr.substring(numStr.length - 8, numStr.length - 8 + point);
                    console.log(decimal);
                    return parseFloat(parseInt(num / 100000000) + '.' + decimal) + '亿'
                }
            }
        }
    }
</script>
<style scoped>
    .banner-img{
        margin-top: 41px;
        width: 100vw;
        /* height: 200px; */
        object-fit: contain;
    }
    .game-menu {
        padding: 10px 20px;
        padding-bottom: 60px;
    }

    .game-menu li {
        padding: 8px 0;
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #e5e5e5;
    }

    .tipClass {
        font-size: 12px;
        color: #fff;
        border-radius: 5px;
        padding: 1px 3px;
        font-size: 8px;
    }

    .game-menu-text {
        margin-left: 8px;
        font-size: 12px;
        color: #888;
        width: 200px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .game-menu-title {
        font-size: 14px;
        font-weight: bold;
        color: #333;
    }

    .game-menu-btn {
        min-width: 50px;
        text-align: center;
        padding: 3px 10px;
        border: 1px solid #888;
        border-radius: 20px;
        font-size: 14px;
        color: #B136D1;
        display: inline-block;
        height: 26px;
        line-height: 20px;
    }
</style>